<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM增加修改</title>
		<style type="text/css">
			#box{
				border: solid 1px red;
			}
		</style>
		<script type="text/javascript" src="DOM对象增加修改.js"/></script>
	</head>
	<body>
		<div id="box">
			<ul id="box_u">
				<li>中国</li>
				<li>美国</li>
			</ul>
		</div>
		
		<hr />
		<input type="text" name="guojia" id="gj" />
		<input type="button" value="添加" onclick="add()" />
		<input type="button" value="innerHTML方法添加" onclick="add2()" />
	    <input type="button" value="删除" onclick="remove()" />
		<!--
			关于name 和 id  之间的不同之处 类似于身份证上的 姓名和身份证号
			id 具有唯一性
			name 可以重复性，常用于统一样式以及统一表单提交
		-->
		<br><br>
		<input type="checkbox"  id="ball" /> 蔡徐坤的篮球
		<hr />
		<input type="button"    id="button_ball_open" value="蔡徐坤篮球点着" onclick="button_ball_open()"/>
		<input type="button"    id="button_ball_off"  value="蔡徐坤篮球飞走" onclick="button_ball_off()"/>
		
	</body>
</html>
